<template>
  <div class="select-style">
    <el-autocomplete
      v-model="selectModel"
      placeholder="请输入关键字"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      :clearable="true"
      @select="onAddressSelect"
    >
      <template slot="append">
        <el-button
          @click="search"
        >
          搜索
        </el-button>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
// import _ from 'lodash';
import tinyPinyin from 'tiny-pinyin';
import Fuse from 'fuse.js';

export default {
  name: 'SearchItem',
  props: {
    searchArray: {
      type: Array,
      default() { return []; },
    },
  },
  data() {
    return {
      // 搜索框绑定值
      selectModel: '',
      // all
      allRes: [],
      // 选择数据
      selectData: '',
    };
  },
  watch: {
    searchArray: {
      handler() {
        if (this && this.searchArray) {
          // 生成拼音
          this.searchArray.forEach((item) => {
            const a = item;
            a.pinyin = tinyPinyin.convertToPinyin(item.name, '-', false);
            a.shouzimu = item.pinyin.split('-').map((v) => v[0]).join('');
            this.allRes.push(a);
          });
        }
      },
      immediate: true,
    },
  },
  mounted() {
  },
  methods: {

    // 选择返回事件
    onAddressSelect(data) {
      this.selectData = data;
      this.selectModel = data.name;
    },

    // 查询按钮事件
    search() {
      // console.log('123321123321',this.selectData);
      this.$emit('select-search', this.selectData);
    },

    /**
     * @description 过滤选项 这个方法在每次输入框的值发生变化时会触发
     */
    querySearch(queryString, callback) {
      // this.searchArray = this.searchArray;
      const selectDataArray = [];
      const { allRes } = this;
      const results = this.query(queryString ? allRes : [], queryString);
      if (results.length && results.length > 0) {
        results.forEach((res) => {
          selectDataArray.push({
            value: res.item.name,
            ...res.item,
          });
        });
      }
      callback(selectDataArray);
    },

    /**
     * @description 指定的数据源中根据指定的查询字符串过滤数据
     * @param {Object} pool 需要过滤的数据
     * @param {String} queryString 查询字符串
     */
    query(pool, queryString) {
      return new Fuse(pool, {
        shouldSort: true,
        tokenize: true,
        threshold: 0.6,
        location: 0,
        distance: 100,
        maxPatternLength: 32,
        minMatchCharLength: 1,
        keys: [
          'name',
          'shouzimu',
          'pinyin',
        ],
      })
        .search(queryString);
      // .map((e) => ({
      //   value: e.item.name,
      //   ...e,
      // }));
    },
  },
};
</script>
<style lang="scss" scoped>
.select-style{
  width: 500px;
  margin: auto;
  /deep/.el-input-group{
    box-shadow: 4px 4px 5px #cdcdcd;
    border-radius: 5px;
  }
  /deep/ .el-input__inner{
    width: 500px;
    height: 40px;
  }
  /deep/ .el-button{
    width: 64px;
  }
  /deep/ .el-input-group__append{
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    background: #419FFF;
    color: #fff;
  }
}
</style>
